<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../Template/HomeTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html">

    <ui:define name="content">        
<!--        <div id="breadcrumbs">
            <a href="./../HomePages/Index.xhtml">Home</a>
            <span class="separate"></span>
            Service Offered
        </div>-->
        <div class="full_entry clearfix">
            <div class="entry_content">
                <h1 class="single-title" style="color: #D20005" >All Service Offered</h1>                
            </div>
        </div>
        <ui:repeat value="#{serviceOfferedBean.showOffered()}" var="offer">
            <div id="post-55" class="post-55 post type-post status-publish format-standard hentry category-3000000-3500000 category-500-1000-square-feet category-beach-house category-modern-architecture category-single-home category-two-bedroom category-urban entry  first" style="background-image: url(./../Resources/images/entry-bg.png); ">
                <div class="thumbnail">
                    <a href="./../Resources/images/pic-12.png" rel="gallery" class="fancybox" title="House On The Beach">
                        <img src="#{offer.image}" title="#{offer.name}" width="292" height="155"></img>
                        <span class="overlay2" style="background-image: url(./../Resources/images/thumb-overlay.png); "></span>
                        <span class="price2" style="left: 87px; background-image: url(./../Resources/images/price-small-bg.png); ">
                            <span style="background-image: url(./../Resources/images/price-small-bg.png); ">#{offer.price}</span></span>
                    </a>
                </div>           
                <h3 class="title"><h:outputLabel value="#{offer.name}"/></h3>
                <div class="hr2" style="background-image: url(./../Resources/images/hr2-bg.png); "></div> 
                <p>#{offer.description}</p>
                <h:link outcome="./../HomePages/ServiceOfferedDetail.xhtml" styleClass="readmore" style="background-image: url(./../Resources/images/readmore-right.png);">
                    <f:param name="offerId" value="#{offer.offerId}"/>
                    <span style="background-image: url(./../Resources/images/readmore-left.png); ">View Detail</span>
                </h:link>
<!--                <a href="#" class="readmore" style="background-image: url(./../Resources/images/readmore-right.png); ">
                    <span style="background-image: url(./../Resources/images/readmore-left.png); ">View Detail</span></a>-->
            </div> <!-- end .entry -->  
        </ui:repeat>
    </ui:define>
</ui:composition>
